<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 2 数组过滤示例</title>
  <!-- 引入 Vue 2 -->
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="keyword" placeholder="请输入关键字">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        keyword: '',
        items: [
          { id: 202319180501, name: '陈家乐' },
          { id: 202319180502, name: '陈丽莹' },
          { id: 202319180503, name: '陈平' },
          { id: 202319180504, name: '邓惠圆' },
          { id: 202319180505, name: '扶云风' },
          { id: 202319180506, name: '付琨怡' },
          { id: 202319180507, name: '何成日' },
          { id: 202319180508, name: '何梓彤' },
          { id: 202319180509, name: '黄寒燕' },
          { id: 202319180510, name: '黄河' },
          { id: 202319180511, name: '黄霞萍' },
          { id: 202319180512, name: '李南凤' },
          { id: 202319180513, name: '李亚辉' },
          { id: 202319180514, name: '刘应昊' },
          { id: 202319180515, name: '龙鑫' },
          { id: 202319180516, name: '马赞崴' },
          { id: 202319180517, name: '宁扬' },
          { id: 202319180518, name: '欧小乐' },
          { id: 202319180519, name: '皮瑶' },
          { id: 202319180520, name: '瞿霆雨' },
          { id: 202319180521, name: '全叔文' },
          { id: 202319180522, name: '任颖佳' },
          { id: 202319180523, name: '王硕' },
          { id: 202319180524, name: '王宇昊' },
          { id: 202319180525, name: '王梓名' },
          { id: 202319180526, name: '吴彦毅' },
          { id: 202319180527, name: '吴耀华' },
          { id: 202319180528, name: '伍丹' },
          { id: 202319180529, name: '伍梅' },
          { id: 202319180530, name: '向嘉豪' },
          { id: 202319180531, name: '谢畅' },
          { id: 202319180533, name: '阳惠芝' },
          { id: 202319180534, name: '杨涵' },
          { id: 202319180535, name: '易紫俊' },
          { id: 202319180536, name: '余泽水' },
          { id: 202319180537, name: '张冰慧' },
          { id: 202319180538, name: '张丽萍' },
          { id: 202319180539, name: '张榕辉' },
          { id: 202319180540, name: '张智炫' },
          { id: 202319180541, name: '钟杰' },
          { id: 202324010428, name: '吴玉蓉' }
        ]
      },
      computed: {
        filteredItems() {
          if (this.keyword === '') {
            return this.items;
          }
          return this.items.filter(item => item.name.includes(this.keyword));
        }
      }
    });
  </script>
</body>

</html>